<template>
  <div>剩余秒数：{{ current.seconds }}</div>
  <van-form>
    <van-cell-group inset>

    </van-cell-group>
  </van-form>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field v-model="value2" clearable label="文本" left-icon="music-o" placeholder="显示清除图标" />
      <van-field v-model="result" :is-link="!result" readonly :right-icon="result ? 'cross' : ''" name="picker"
        label="选择器" placeholder="点击选择城市" @click="result ? click() : showPicker = true">
      </van-field>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { useCountDown } from '@vant/use';

export default {
  setup() {
    const countDown = useCountDown({
      // 倒计时 24 小时
      time: 60 * 1000,
    });

    // 开始倒计时
    countDown.start();

    const data = reactive({
      value2: '',
      result: '',
      showPicker: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
    })


    const onConfirm = (value) => {
      data.result = value;
      data.showPicker = false;
    };

    const onSubmit = () => { }
    const click = () => {
      data.result = ''
    }


    const dataArr = [{ value:' ' ,label:' ' , a:'' , b:'' , c:'' , d:'' }]
    const arr = ['value','label','a','b','c','d']
    const a = isVerify(dataArr,arr)
    function isVerify(dataArr, arr) {
      let isFamily = true
      // 遍历处有没有不等于空的值   都为空的话 isFamily  === true  只要有一个不为空就返回false
      dataArr.forEach(item => {
        if (isFamily) isFamily = !(arr.some(it => (item[it] + '')?.replace(/\s+/g, '') === ''))
      })
      return isFamily
    }

    return {
      ...toRefs(data),
      onSubmit,
      onConfirm,
      click,
      current: countDown.current,
    };
  },
};
</script>
